<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="../include/head.jsp" %>
    <%@include file="../include/link.jsp" %>
</head>
<style>
    .block_box {
        width: 100%;
    }

    .clear_fix {
        zoom: 1;
    }

    .post_box {
        width: calc(100% - 320px);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 16px;
    }

    .post_box_others {
        display: inline-block;
        width: 300px;
        margin-left: 20px;
    }

    .simple_container_body {
        background-color: #fff;
        padding: 16px 31px;
        margin-bottom: 16px;
        border-radius: 0 0 4px 4px;
    }

    .simple_container_body_body.hasHeader {
        margin-top: 0;
    }

    .post_item:first-child {
        padding-top: 15px;
    }

    .post_item {
        position: relative;
        padding: 28px 0 24px;
    }

    .post_item:after {
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        content: " ";
        position: absolute;
        height: 1px;
        background-color: rgba(0, 0, 0, .1);
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
    }

    .post_overview .post_title {
        font-weight: 400;
        display: block;
        font-size: 16px;
        line-height: 1.25;
        margin: 8px 0 16px 0;
    }

    .post_overview .post_title a {
        color: rgba(0, 0, 0, .9);
        margin-right: 0;
        font-weight: 700;
    }

    .post_overview .post_desc {
        color: rgba(0, 0, 0, .5);
        margin: 8px 0 5px;
        overflow: hidden;
        word-break: break-all;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .post_overview .post_tags_container {
        margin-top: 16px;
    }

    .post_overview .post_info {
        *zoom: 1;
        margin: 8px 0 0;
        color: rgba(0, 0, 0, .5);
        font-size: 14px;
    }


    .post_overview .post_group {
        display: inline-block;
        margin-right: 16px;
        font-size: 14px;
    }

    .mod_mix_flow_list_item .post_time.post_info_meta {
        margin-left: 14px;
        line-height: 23.3px;
    }

    .post_overview .post_info_meta {
        display: inline-block;
        vertical-align: top;
        font-weight: 400;
        font-style: normal;
        margin-right: 14px;
        font-size: 14px;
        color: rgba(0, 0, 0, .3);
    }

    .post_overview .post_info .post_info_extend {
        float: right;
    }

    .post_overview .post_info_meta {
        display: inline-block;
        vertical-align: top;
        font-weight: 400;
        font-style: normal;
        margin-right: 14px;
        font-size: 14px;
        color: rgba(0, 0, 0, .3);
    }

     .post_group span {
        float: left;
        height: 24px;
        line-height: 24px;
        margin-right: 5px;
        padding: 0 10px;
        border-radius: 2px;
        background: #f2f2f2;
        color: #888;
        font-size: 12px;
        text-decoration: none;
    }

    .post_item {
        height: 135px;
        margin-top: 12px;
        /*margin-bottom: 24px;*/
        /*border-bottom: 1px dotted #dadada;*/
    }

    .article-image {
        position: relative;
        float: left;
        overflow: hidden;
        width: 240px;
        height: 135px;
    }

    .article-link {
        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-transition: .6s;
        transition: .6s;
        -webkit-transform: scale(1);
        transform: scale(1);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .article-item--list {
        position: relative;
        overflow: hidden;
        height: 135px;
        margin-right: 8px;
        margin-left: 256px;
        border-top: 1px dotted #e0e0e0;
    }
</style>
<body>
<%@include file="../include/appHerder.jsp" %>
<div class="container viewpointlist w clearfix">
    <div class="content inner-right list">
        <form action="${ctx}/wxApp" id="searchForm" method="get">
        </form>
        <%@include file="../include/subnav.jsp" %>
        <%--   --------------------------  内容开始 ------------------------------------- --%>

        <div class="home_page">
            <div id="pulldown-cnt" class="block_box clear_fix">
                <div class="post_box ">
                    <div class="simple_container_body">
                        <div class="simple_container_body_body hasHeader">
                            <div class="mod_article_list_container mod_mix_flow_list_item">
                                <ul class="post_list">
                                    <c:forEach var="item" items="${pageInfo.getList()}">
                                        <li class="post_item post_overview post_item_simple_qa">
                                            <div class="article-image">
                                                <a href="${ctx}/appTuiJianDetail/${item.id}.html" style=" background-image:url('${item.post_cover_image}');" class="article-link"></a>
                                            </div>
                                            <div class="article-item--list">
                                                <h2 class="post_title">
                                                    <a href="${ctx}/appTuiJianDetail/${item.id}.html"
                                                       target="_blank">${item.post_title}</a>
                                                </h2>
                                                <p check-reduce="" class="post_desc">
                                                        ${item.post_excerpt}
                                                </p>
                                                <div check-reduce="" class="post_tags_container"></div>
                                                <div class="post_info">
                                                <span check-reduce="" class="post_group">
                                                    <c:forEach var="tag" items="${fn:substring(item.post_tag, 1, fn:length(item.post_tag)-1)}">
                                                        <span class="tag">${fn:substring(tag, 1, fn:length(tag)-1)}</span>
                                                    </c:forEach>
                                                </span>
                                                    <em class="post_time post_info_meta"> ${item.published_at}</em>
                                                    <div class="post_info_extend">
                                                <span itemprop="commentCount" class="post_discuss_num post_info_meta">
                                                    <i class="icon_post_opr_discuss"></i>130
                                                </span>
                                                        <span class="post_discuss_num post_info_meta">
                                                    <i class="icon_post_opr_view"></i>19805
                                                </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="page">
                        ${pageInfo.toString().replaceAll("urlTemp","/appTuiJian/")}
                    </div>
                </div>
<%--                <div check-reduce="" class="post_box_others">--%>
<%--                    APP推荐--%>
<%--                </div>--%>
            </div>
        </div>

        <%--   --------------------------  内容结束 ------------------------------------- --%>

    </div>
</div>
<%@include file="../include/footer.jsp" %>
</body>
<script type="text/javascript" data-original="../../../static/common/js/pageSearch.js"></script>
</html>
